<template>
    <header>
        <div class="banxin tanxin header_in">
            <section>欢迎来到叩丁狼积分商城</section>
            <ul>
                <li class="avatar_li">
                    <img width="26" class="avatar" :src="userInfo.headImg" alt="" />
                    用户名 ：{{ userInfo.nickName }}
                </li>
                <li>我的积分：{{ userInfo.coin }}</li>
                <li>获取积分</li>
                <li>叩丁狼官网</li>
                <li class="header_btn cart_btn" v-if="isLogin" @click="$router.push('/user/cart')">
                    <img src="../assets/images/Shopping.png" alt="" />
                    <span>购物车</span>
                    <b>{{ cartTotal }}</b>
                </li>
                <li class="header_btn login_btn" v-else @click="goLogin">登录</li>
                <li class="header_btn login_btn" @click="jiebangFn">解绑微信</li>
            </ul>
        </div>
    </header>
</template>

<script>
import { UserInfoApi, WeiXinLoginApi, UnBindWechatApi } from "@/request/api";
export default {
    data() {
        return {
            isLogin: false, // 是否登录，默认false未登录
            // 用户信息
            userInfo: {
                // 头像
                headImg: require("../assets/images/userImg.png"),
                // 用户名
                nickName: "游客",
                // 鸡腿数
                coin: "--",
            },
            // 购物车的数量
            cartTotal: this.$store.state.cartTotal,
        };
    },
    methods: {
        goLogin() {
            // ？  需要改变登录那个框的v-show的状态
            // 触发mutations 去 打开login
            this.$store.commit("changeLoginShow", true);
        },
        // 公用函数
        bindWecahtFn() {
            // console.log(this.$route.query.code);
            let code = this.$route.query.code;
            // 如果地址栏有code 才去做微信登录的接口请求
            if (code) {
                WeiXinLoginApi({ code }).then((res) => {
                    if (res.data.code === 0) {
                        // 成功
                        let obj = {
                            content: "登录成功",
                            icon: "success",
                        };
                        this.$store.dispatch("AsyncToast", obj);
                        // 存储token
                        localStorage.setItem("x-auth-token", res.data["x-auth-token"]);
                        // 更新header组件
                        this.$emit("updateKeyFn");
                        // 删除地址栏的code
                        this.$router.push(this.$route.path);
                    } else if (res.data.code === 400) {
                        // 重新扫码
                        let obj = {
                            content: "页面过期，请重新扫码二维码",
                            icon: "danger",
                        };
                        this.$store.dispatch("AsyncToast", obj);
                        // 重新打开登录框
                        this.$store.commit("changeLoginShow", true);
                    } else if (res.data.code === 407) {
                        // 需要手机验证码登录
                        let obj = {
                            content: "请使用手机号登录来绑定微信",
                            icon: "danger",
                        };
                        this.$store.dispatch("AsyncToast", obj);
                        // 重新打开登录框
                        this.$store.commit("changeLoginShow", true);
                        // 临时存储下uuid
                        sessionStorage.setItem("uuid", res.data.uuid);
                    } else {
                        // 报错
                    }
                });
            }
        },
        // 解绑微信
        jiebangFn() {
            UnBindWechatApi().then((res) => {
                console.log(res);
            });
        },
    },
    watch: {
        "$route.query.code": {
            handler(newVal, oldVal) {
                if (newVal !== oldVal) {
                    // 调用绑定微信的函数
                    this.bindWecahtFn();
                }
            },
        },
    },
    created() {
        // 获取用户信息
        UserInfoApi().then((res) => {
            // console.log(res.data.data);
            if (res.data.code === 0) {
                let { cartTotal, userInfo } = res.data.data;
                // console.log(userInfo);
                this.cartTotal = cartTotal;
                this.userInfo = userInfo;
                this.isLogin = true;
            }
        });
        // 调用绑定微信的函数
        this.bindWecahtFn();
    },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

header {
    background: @black;
    height: 40px;
    color: #fffefe;
    font-size: 14px;

    .header_in {
        align-items: center;
        height: 40px;

        ul {
            display: flex;
            height: 40px;
            align-items: center;

            li {
                margin-right: 20px;

                &.avatar_li {
                    height: 26px;
                    display: flex;
                    align-items: center;
                    cursor: pointer;

                    .avatar {
                        border-radius: 50%;
                    }
                }

                &.header_btn {
                    width: 124px;
                    height: 40px;
                    background: @blue;
                    cursor: pointer;
                }

                &.login_btn {
                    text-align: center;
                    line-height: 40px;
                }

                &.cart_btn {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    span {
                        margin-left: 8px;
                        margin-right: 6px;
                    }

                    b {
                        width: 22px;
                        height: 22px;
                        background: @orange;
                        border-radius: 11px;
                        text-align: center;
                        line-height: 22px;
                    }
                }
            }
        }
    }
}
</style>